<template>
  <div class="posAdd">
      <van-nav-bar title="添加岗位" left-text="" left-arrow @click-left="onClickLeft" />
    <div class="Form">
      <van-form @failed="onFailed" @submit="onSubmit">
        <van-cell-group inset>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field
            v-model="value1"
            name="value1"
            label="岗位名称"
            label-width="100"
            placeholder="请输入分销商名称"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="value2"
            label-width="100"
            type="textarea"
            name="职务范围"
            label="职务范围"
            label-align="top"
            rows="4"
            class="larges"
            placeholder="请填职务范围"
            :rules="[{ required: true, message: '请填职务范围' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block  native-type="submit"  color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 100%)">
            提交
          </van-button>
        </div>
      </van-form>
      <van-popup v-model:show="showPicker" position="bottom">
        <van-picker
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script setup>
import TitleItem from "@/components/title-item/title-item.vue";
import { closeToast, showLoadingToast } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const value1 = ref("");
const value2 = ref("");
const password = ref("");
const result = ref("");
const showPicker = ref(false);
const columns = [
  { text: "杭州", value: "Hangzhou" },
  { text: "宁波", value: "Ningbo" },
  { text: "温州", value: "Wenzhou" },
  { text: "绍兴", value: "Shaoxing" },
  { text: "湖州", value: "Huzhou" },
];

const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text;
  showPicker.value = false;
};
// const value4 = ref("");
// const pattern = /\d{6}/;

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val) =>
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
    val
  );

const onFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};
const onSubmit = (val)=>{
  console.log(val,'成功的值')
}
// 返回按钮
const onClickLeft = () => {
router.back();
};
</script>

<style lang="scss" scoped>
::v-deep .larges .van-field__body{
    border-bottom: 0.5px solid rgba(217, 217, 217, 0.5) !important;
  }
.posAdd {
  padding: 20px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  color: #1d1b20;
  .topTitle {
    margin-left: -4px;
  }
  
}
</style>
